<template>
  <Layout :showNav.sync="showNav" :showHeader="showHeader" :data="data">
    <div id="fullpage" ref="fullpage">
      <Page1 class="page" :data="data"/>
      <Page2 class="page" :data="data"/>
      <Page3
        class="page"
        :data="data"
        :showNav="showNav"
        :showSubscribe="showSubscribe"
        ref="pages"
      />
    </div>
    <Nav
      ref="nav"
      v-if="showNav"
      @favorite="favorite"
      :isFavorite="isFavorite"
      :activeIndex.sync="index"
      :showNav.sync="showNav"
      @showDialog="showDialog"
    />
    <div class="menu" @click="showMenu" v-if="!showHeader">菜单</div>
    <preview :open.sync="open" :items="pics"></preview>
    <dialog-yy v-if="isShowDialog" @closeDia="closeDia"/>
  </Layout>
</template>

<script>
import "../js/fullpage";
import Layout from "../components/layout";
import Page1 from "../components/page1";
import Page2 from "../components/page2";
import Page3 from "../components/page3";
import Nav from "../components/nav";
import DialogYy from "../components/dialogyy";
import data from "../js/data";
import preview from "../components/preview";

export default {
  head: {
    script: [{ src: "/js/resize.js" }]
  },
  components: {
    Nav,
    Page1,
    Page2,
    Page3,
    Layout,
    preview,
    DialogYy
  },
  async asyncData({ $axios, query }) {
    const {
      data: { rows }
    } = await $axios.post("fang/find", {
      id: query.id
    });

    return {
      data: rows[0] ? rows[0]["AL"] : { designer: {}, effect: { pics: [{}] } },
      open: false,
      index: 0,
      showNav: false,
      showHeader: true,
      showSubscribe: true,
      isShowDialog: false,
      isFavorite: false
    };
  },
  watch: {
    showNav(value) {
      this.showSubscribe = !value;
    }
  },
  computed: {
    pics() {
      if (!process.browser) return [];
      return this.data["effect"]["pics"].map(item => {
        return {
          src: item.url,
          title: item.location,
          w: window.innerWidth,
          h: window.innerHeight / 2
        };
      });
    }
  },
  methods: {
    show() {
      this.open = true;
    },
    subscribe() {
      this.showSubscribe = false;
      this.isShowDialog = true;
    },
    showDialog() {
      this.isShowDialog = true;
    },
    showMenu() {
      this.showNav = !this.showNav;
    },
    closeDia() {
      this.showSubscribe = true;
      this.isShowDialog = false;
    },
    async favorite() {
      const url = this.isFavorite ? "favorite/delete" : "favorite/add";
      await this.$axios.post(url, {
        id: this.data._id.$oid,
        type: 4
      });
      this.isFavorite = !this.isFavorite;
    }
  },
  mounted() {
    console.log(this.data);
    console.log("===================");
    $(this.$refs.fullpage).fullpage({
      sectionSelector: ".page",
      verticalCentered: false,
      anchors: ["page0", "page1", "page2"],
      licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
      afterLoad: (origin, { index }, direction) => {
        // this.$refs.nav.toggle({
        //   index: index + 1
        // });
        this.index = index;
      }
    });
  }
};
</script>

<style lang="less">
body {
  font-size: 32px;
  color: #333;
  .menu {
    position: fixed;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 80px;
    color: #fff;
    bottom: 72px;
    right: 40px;
    text-align: center;
    background: #f7a807;
    box-shadow: 0px 4px 4px -7px rgba(0, 0, 0, 0.5);
  }
}
</style>
